import { reactive, watch } from 'vue'

import type {
  IFromProps, // 表单组件的属性
  IRuleMeta, // 验证
  IFormColShow, // 子组件的联动
  ISubs, // 分栏
  IFromMeta // 表单控件需要的 meta
} from '../../types/30-form'

import type { IFormItem } from '../../types/20-form-item'

/**
 * 创建表单的验证规则，把字段ID转换为字段名称
 * @param itemMeta 表单子控件的meta
 * @param ruleMeta 表单控件的验证规则
 * @returns 
 */
export const getRules = (itemMeta: IFormItem, ruleMeta: IRuleMeta) => {
  const rules = reactive({})

  // 表单子控件的属性，key是字段ID
  // const itemMeta = itemMeta

  for (const key in ruleMeta) {
    const rule = ruleMeta[key]
    rules[itemMeta[key].colName] = rule
  }

  // 监听
  watch(ruleMeta, () => {
    // 删除以前的验证
    for (const key in rules) {
      delete rules[key]
    }
    for (const key in ruleMeta) {
      const rule = ruleMeta[key]
      rules[itemMeta[key].colName] = rule
    }
  })

  return rules
}